<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router'
import type {FormInstance, FormRules, UploadInstance, UploadProps, UploadRawFile} from 'element-plus'
import {reactive, ref, h, computed} from 'vue'
import {Server} from '@/stores/ajax';
import {ServerUtils} from '@/serverUtils';
import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'
import {Search} from '@element-plus/icons-vue'
import postlist from '@/components/bbs/postList1.vue'
let router = useRouter()
let route = useRoute()
let searchFor = route.params.for
let searchKey = $ref(String(route.params.str || ''))
let select = $ref('2')
let postCallback = ref(async (page: number, posts_per_page: number) => {
    if (!searchKey) {
        posts_per_page = 0
    }
    return await ServerUtils.getPosts(null, null, null, ['star', 'collect'], page, posts_per_page, false, searchKey)
})
let postlistRef = $ref<any>()
const handleSearchSubmit = async () => {
    postlistRef.refresh()
}
</script>
<template>
    <div class="search-block fvs card-block">
        <el-input v-model="searchKey" placeholder="输入关键词"
            class="input-with-select"
            @keypress.enter="handleSearchSubmit">
            <template #prepend>
                <el-select v-model="select"
                    style="width: 75px">
                    <el-option label="用户" value="1" />
                    <el-option label="帖子" value="2" />
                    <!-- <el-option label="Tel" value="3" /> -->
                </el-select>
            </template>
            <template #append>
                <el-button :icon="Search"
                    @click="handleSearchSubmit" />
            </template>
        </el-input>
        <postlist :post-callback="postCallback"
            ref='postlistRef' />
        <div class="label-noresult fh" v-if='searchKey && !postlistRef?.posts?.list.length'>
            无结果
        </div>
    </div>
</template>

<style lang="scss" scoped>
.search-block {
    flex-basis: 820px;
    min-width: 600px;
    padding: 16px 12px 0;
    min-height: 200px;

    .label-noresult {
        margin: 14px 0;
        color: #999;
    }
}
</style>
